<template>
  <div class="create-business">
    <!-- <el-button type="primary" @click="showDialog">
      创建业务
    </el-button>-->
    <!-- 弹窗 -->
    <el-dialog
      title="创建业务"
      v-bind="$attrs"
      width="1050px"
      :visible.sync="dialogFormVisible"
    >
      <div class="container">
        <div class="left">
          <el-steps
            :active="active"
            direction="vertical"
            style="height:550px;"
            finish-status="success"
          >
            <el-step title="基础配置" />
            <el-step title="业务配置" />
            <el-step title="联动配置" />
            <el-step title="数据报告" />
            <el-step title="完成" />
          </el-steps>
        </div>

        <div class="right">
          <!-- 基础配置 -->

          <el-form v-if="active == 0" label-width="100px" class="demo-ruleForm">
            <el-form-item>
              <p>基础配置</p>
            </el-form-item>
            <el-form-item class="required" label="业务名称：" prop="name">
              <el-input v-model="buName" placeholder="请输入" maxlength="10" />
            </el-form-item>
            <el-form-item class="required" label="业务类型：" prop="name">
              <el-select v-model="buTypeValue" placeholder="请选择">
                <el-option
                  v-for="item in businessType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="required" label="业务级别：" prop="name">
              <el-checkbox
                v-for="item in buTypeSelectValue"
                :key="item.id"
                v-model="item.check"
                :label="item.name"
              />
            </el-form-item>

            <el-form-item class="required" label="业务级别：" prop="name">
              <el-select v-model="sortValue" placeholder="请选择">
                <el-option
                  v-for="item in sortData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item class="required" label="考核指标：" prop="name">
              <el-input
                :disabled="true"
                class="w200"
                placeholder="请点击右侧图标进行选择"
              />
              <span class="iconfont" @click="assessFlag = true">&#xe655;</span>
            </el-form-item>

            <el-form-item label="关联指标：" prop="name">
              <el-input
                :disabled="true"
                style="width: 90%"
                placeholder="请点击右侧图标进行选择"
              />
              <span class="iconfont" @click="relatingFlag = true">
                &#xe655;
              </span>
            </el-form-item>
          </el-form>

          <!-- 业务配置 -->
          <el-form
            v-if="active == 1"
            lab
            el-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item>
              <p>基础配置</p>
            </el-form-item>
            <el-button class="icon-plus" type="primary">
              <i class="el-icon-plus" />
              添加预警
            </el-button>
            <el-form-item class="warning-msg">
              <el-button>一般预警</el-button>
              <i class="el-icon-close" />
            </el-form-item>
            <el-form-item class="ml" label="考核指标：" prop="name">
              <el-input
                style="width: 80%"
                placeholder="请点击右侧图标进行配置"
                :disabled="true"
              />
              <span class="iconfont">&#xe655;</span>
            </el-form-item>
            <el-form-item class="ml" label="关联指标：" prop="name">
              <!-- <el-checkbox-group v-model="relatingValue"> -->
              <el-checkbox
                v-for="item in relatingValue"
                :key="item.name"
                v-model="item.check"
                :label="item.name"
              />
              <!-- </el-checkbox-group> -->
            </el-form-item>
            <el-form-item class="ml" label="短信模板：" prop="name">
              <el-input
                style="width: 80%"
                placeholder="请点击右侧图标进行配置"
                :disabled="true"
              />
              <span class="iconfont">&#xe655;</span>
            </el-form-item>
            <el-form-item class="ml" label="销项模板：" prop="name">
              <el-input
                style="width: 80%"
                placeholder="请点击右侧图标进行配置"
                :disabled="true"
              />
              <span class="iconfont">&#xe655;</span>
            </el-form-item>
            <el-form-item class="ml" label="整改建议：" prop="name">
              <el-input
                style="width: 80%"
                placeholder="请点击右侧图标进行配置"
                :disabled="true"
              />
              <span class="iconfont">&#xe655;</span>
            </el-form-item>
          </el-form>
          <!-- 联动配置 -->
          <el-form v-if="active == 2" label-width="100px" class="demo-ruleForm">
            <el-form-item label="联动配置：" prop="name">
              <el-input />
            </el-form-item>
          </el-form>
          <!-- 数据报告 -->
          <el-form v-if="active == 3" label-width="100px" class="demo-ruleForm">
            <el-form-item label="数据报告：" prop="name">
              <el-input />
            </el-form-item>
          </el-form>
          <!-- 完成 -->
          <el-form v-if="active == 4" label-width="100px" class="demo-ruleForm">
            <el-form-item label="完成" prop="name">
              <el-input />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div v-if="success" slot="footer" class="dialog-footer">
        <el-button @click="pre">
          上一步
        </el-button>
        <el-button type="primary" @click="next">
          下一步
        </el-button>
      </div>
      <div v-else slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click=";(dialogFormVisible = false), (active = 0), (success = true)"
        >
          完成
        </el-button>
      </div>

      <!-- 内层 考核指标 -->
      <el-dialog
        title="选择考核指标"
        :visible.sync="assessFlag"
        width="490px"
        append-to-body
      >
        <div class="dia-assess">
          <el-input
            v-model="seachAssess"
            placeholder="请输入"
            style="width: 70%; text-align: center;"
          >
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
          <el-tree
            :props="assessProps"
            :load="loadNode"
            lazy
            show-checkbox
            @check-change="handleCheckChange"
          />
        </div>
        <div slot="footer">
          <el-button @click="assessFlag = false">
            取 消
          </el-button>
          <el-button type="primary" @click="assessFlag = false">
            确 定
          </el-button>
        </div>
      </el-dialog>
      <!-- 内层关联指标 -->
      <el-dialog
        title="选择考核指标"
        :visible.sync="relatingFlag"
        width="490px"
        append-to-body
      >
        <div class="dia-assess">
          <el-input
            v-model="seachAssess"
            placeholder="请输入"
            style="width: 70%; text-align: center;"
          >
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
          <el-tree
            :props="assessProps"
            :load="loadNode"
            lazy
            show-checkbox
            @check-change="handleCheckChange"
          />
        </div>
        <div slot="footer">
          <el-button @click="relatingFlag = false">
            取消
          </el-button>
          <el-button type="primary" @click="relatingFlag = false">
            确定
          </el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
// import SuperForm from '@/components/SuperForm'
// import { updateFormItem } from './config'

export default {
  name: 'DeviceUpdate',
  // components: { SuperForm },
  props: {
    deviceCodeDisabled: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    handleSubmit: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      input: '',
      selfStyle: {
        color: 'red'
      },

      buName: '', // 业务名称
      buTypeSelectValue: [
        // 业务类型选择数据
        {
          id: 1,
          name: '凤凰慧',
          check: false
        },
        {
          id: 2,
          name: 'iRBA',
          check: false
        },
        {
          id: 3,
          name: '集成平台',
          check: false
        },
        {
          id: 4,
          name: 'ERP',
          check: false
        },
        {
          id: 5,
          name: 'CRM',
          check: false
        },
        {
          id: 6,
          name: '碧拓系统',
          check: false
        },
        {
          id: 7,
          name: 'AHR',
          check: false
        },
        {
          id: 8,
          name: '合同系统',
          check: false
        },
        {
          id: 9,
          name: '采购系统',
          check: false
        },
        {
          id: 10,
          name: '云仓',
          check: false
        },
        {
          id: 11,
          name: '社区增值系统',
          check: false
        }
      ],
      sortValue: '', // 业务级别，选中的
      sortData: [
        // 业务级别选项框
        {
          value: '选项总部级',
          label: '总部级'
        },
        {
          value: '选项区域级',
          label: '区域级'
        },
        {
          value: '选项项目级',
          label: '项目级'
        }
      ],

      // 第二个中
      relatingValue: [
        // 关联指标
        {
          id: 1,
          name: '业主满意度',
          check: false
        },
        {
          id: 2,
          name: '工单影响率',
          check: false
        }
      ],
      assessFlag: false, // 考核指标
      relatingFlag: false, // 关联指标
      seachAssess: '', // 关联指标搜索框
      assessProps: {
        //  关联指标 树形控件
        label: 'name',
        children: 'zones'
      },
      count: 1,

      active: 0,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      success: true,
      buTypeValue: '', // 业务类型,拿到的是数据中的value
      businessType: [
        // 业务类型，下拉中内容
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: ''
    }
  },
  watch: {
    deviceCodeDisabled: {
      handler: function() {
        // this.renderFormItem = updateFormItem(this.deviceCodeDisabled);
      },
      immediate: true
    }
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      // 树形控件的
      console.log(data, checked, indeterminate)
    },
    handleNodeClick(data) {
      // 树形控件的
      console.log(data)
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([
          {
            name: 'region1'
          },
          {
            name: 'region2'
          }
        ])
      }
      if (node.level > 3) return resolve([])

      var hasChild
      if (node.data.name === 'region1') {
        hasChild = true
      } else if (node.data.name === 'region2') {
        hasChild = false
      } else {
        hasChild = Math.random() > 0.5
      }

      setTimeout(() => {
        var data
        if (hasChild) {
          data = [
            {
              name: 'zone' + this.count++
            },
            {
              name: 'zone' + this.count++
            }
          ]
        } else {
          data = []
        }

        resolve(data)
      }, 500)
    },
    pre() {
      if (this.active === 0) return
      this.active--
    },
    next() {
      if (this.active++ > 2) {
        this.success = false
      }
    },
    showDialog() {
      console.log(1)
      this.dialogFormVisible = true
    }
  }
}
</script>

<style lang="scss" scope>
@import './createBusiness.scss';
</style>
